// pages/feedback/index.js
Page({
/** 
 * 1.点击“+” 触发tap点击事件
 *  1.调用小程序内置的选择图片的api
 *  2.获取到图片的路径  数组
 *  3.把图片路径存到data的变量中
 *  4.页面就可以根据图片数组  进行循环显示  自定义组件
 * 
 * 2.点击 自定义图片  组件
 *  1.获取被点击的元素的索引
 *  2.获取data中的图片数组
 *  3.根据索引 数组中删除对应的元素
 *  4.把数组重新设置回data中
 * 
 * 3.点击“提交”
 *  1.获取文本域的内容  类似输入框的获取
 *    1. data中定义变量  表示 输入框内容
 *    2. 文本域绑定输入事件  事件触发的时候 把输入框的值  存入到变量中
 *  2.对这些内容合法性验证
 *  3.验证通过  用户选择的图片  上传到专门的图片的服务器  返回图片外网的链接
 *    1.遍历图片数组
 *    2.挨个上传
 *    3.自己再维护图片数组  存放 图片上传后的外网的链接
 *  4.文本域和外网的图片的路径 一起提交到服务器  前端的模拟  不会发送请求到后台
 *  5.清空当前页面
 *  6.返回上一页
*/


  /**
   * 页面的初始数据
   */
  data: {
    tabs: [
      {
        id: 0,
        value: '体验问题',
        isActive: true
      },
      {
        id: 1, 
        value: '商品/商家投诉',
        isActive: false
      }
    ],
    // 被选中的图片路径的数组
    imgChooseList: [],
    textValue: '' // 文本域内容
  },

  // 外网的图片的路径数组
  uploadImgs: [],

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /** 
   * 标题的点击事件 从子组件Tabs传递过来的
   */
  handleTabsItemChange(e) {
    console.log(e)
    const index = e.detail
    let tabs = JSON.parse(JSON.stringify(this.data.tabs))
    tabs.forEach((item, index_tabs) => {
        index_tabs === index ? item.isActive = true : item.isActive = false
    })
    // 重新赋值
    this.setData({
      tabs
    })
  },

  // 点击“+”  选择图片
  handleChooseImg() {
    // 1.调用小程序内置的选择图片api
    wx.chooseImage({
      count: 9, // 同时选中的图片的数量
      sizeType: ['original','compressed'], // 图片的格式  相册   照相机
      sourceType: ['album','camera'], // 图片的来源  相册  照相机
      success: (result)=>{
        console.log(result)
        this.setData({
          imgChooseList: [...this.data.imgChooseList, ...result.tempFilePaths]
        })
        console.log(this.data.imgChooseList)
      },
      fail: ()=>{},
      complete: ()=>{}
    });
  },

  // 点击自定义图片组件
  handleDeleteImg(e) {
    const {index} = e.currentTarget.dataset
    console.log(index)
    let { imgChooseList } = this.data
    this.data.imgChooseList.splice(index,1)
    this.setData({
      imgChooseList
    })
  },

  // 文本域的输入事件
  handleTextInput(e) {
    console.log(e)
    this.setData({
      textValue:e.detail.value
    })
  },

  // 提交
  handleFormSubmit() {
    const { textValue, imgChooseList } = this.data
    if(!textValue.trim()) {
      wx.showToast({
        title: '输入不合法！',
        icon: 'none'
      })
      return
    }
    console.log(imgChooseList)
    // 准备上传图片到专门的图片服务器
    // 上传文件的api 不支持多个文件的同时上传  所以采取遍历数组  挨个上传
    // 显示正在等待的图片

    wx.showLoading({
      title: '正在上传中',
      mask: true
    })

    // 判断有没有需要上传的图片数组
    if(imgChooseList.length !== 0) {
      imgChooseList.forEach((item,index) => {
        wx.uploadFile({
          url: 'https://img.coolcr.cn/index/api.html', // 图片要上传到哪里
          filePath: item, // 被上传的文件的路径
          name: 'image', // 上传的文件的名称   后台来获取文件 file
          formData: {}, // 顺带的文本信息
          success: (result)=>{
            console.log(result)
            let url = JSON.parse(result.data).url  
            this.uploadImgs.push(url)
  
            // 所有的图片都上传完了才触发
            if(index === imgChooseList.length-1) {
              wx.hideLoading() // 关闭上传中...弹窗
              console.log('把文本的内容和外网的图片数组提交到后台中---此处仅做前端模拟演示...')
              // 提交成功了
              // 重置页面
              this.setData({
                textValue: '',
                imgChooseList: []
              })
              // 返回上一个页面
              wx.navigateBack({
                delta: 1
              })
            }
          },
          fail: ()=>{},
          complete: ()=>{}
        })
      })
    } else {
      console.log('只提交了文本！')
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})